<template>
    <div class="custom-tree-container">
        <el-button type="primary" style="margin-right:10px" plain  @click="addOrg">新增</el-button>
        <el-divider />
        <el-table
                :data="dataSource"
                v-loading="loading"
                style="width: 100%; margin-bottom: 20px"
                row-key="id"
                border
                default-expand-all
                header-cell-class-name="headerClass"
        >
            <el-table-column prop="name" label="机构名"/>
            <el-table-column align="center" prop="level" label="层级"/>
            <el-table-column align="center"  prop="updateTime" label="更新时间" >
                <template #default="scope">
                    {{moment(scope.row.updateTime).format("yyyy-MM-DD HH:mm:ss")}}
                </template>
            </el-table-column>
            <el-table-column align="center"  label="操作">
                <template #default="scope">
                    <el-link title="修改" type="primary" @click="updateOrg(scope.row.id)">
                        <el-icon :size="20">
                            <Edit />
                        </el-icon>
                    </el-link>
                    &nbsp;
                    <el-popconfirm title="删除？" @confirm="deleteNode(scope.row.id)"  @cancel="">
                        <template #reference>
                            <el-link type="danger" title="删除">
                                <el-icon :size="20">
                                    <Delete />
                                </el-icon>
                            </el-link>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <ModOrg @reload = load :id=edit.id :type=edit.type ref="modOrg"/>
</template>

<script setup>
    import { ref,reactive,onMounted } from 'vue'
    import request from '@/utils/request.js'
    import ModOrg from '@/components/system/ModOrg.vue'
    import moment from 'moment'
    import { ElMessage } from 'element-plus'
    let id = 1000
    let modOrg = ref()
    let loading = ref(true)

    let edit = reactive({type:"add",id:0})
    onMounted(() => {
        load()
    })

    function load() {
        request.get(`/api/org/getOrgs`).then(resp => {
            dataSource.splice(0, dataSource.length)
            dataSource.push(...resp)
            loading.value = false
        })
    }

    const deleteNode = (nodeId) => {
        request.get(`/api/org/delete/${nodeId}`).then(resp => {
            if(resp){
                load()
            }
        })
    }

    let dataSource = reactive([])
    function  addOrg() {
        edit.type = "add"
        modOrg.value.showDialog = true
    }

    function  updateOrg(id) {
        edit.type = "update"
        edit.id = id
        modOrg.value.showDialog = true
    }
</script>

<style lang="css">

    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }
</style>
